<template>
  <div class="home">
    <!-- 顶部 -->
    <div class="home-top-left">
            <el-select style="width: 100px;margin-right: 8px;" v-model="dateType" size="small" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-date-picker v-if="dateType !== 'year'" style="width: 220px;" size="small" v-model="dateValue"
              :type="dateType" range-separator="-" :clearable="false" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
            <template v-else>
              <el-date-picker style="width: 100px;" size="small" v-model="dateValue[0]" :type="dateType"
                range-separator="-" :clearable="false" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>-
              <el-date-picker style="width: 100px;" size="small" v-model="dateValue[1]" :type="dateType"
                range-separator="-" :clearable="false" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </template>
          </div>
    <div class="home-top beautify-scroll-def">
      
      <div class="top-item">
        <div class="item-left">
          <img class="item-left-img" src="~@/assets/imgs/home1.png" alt="" />
        </div>
        <div class="item-right">
          <div class="item-right-top">
            <BigNumber :value="toFixed(data1.projectCount || 0)" />
          </div>
          <div class="item-right-mid">项目数(个)</div>
          <!-- <div class="item-right-bottom">
            <span
              >状态1
              <BigNumber :value="89" />
            </span>
            &nbsp;
            <span
              >状态2
              <BigNumber :value="12" />
            </span>
          </div> -->
        </div>
      </div>

      <div class="top-item">
        <div class="item-left">
          <img class="item-left-img" src="~@/assets/imgs/home2.png" alt="" />
        </div>
        <div class="item-right" v-if="data5.length">
          <div class="item-right-top">
            <BigNumber :value="toFixed(data5[0].value || 0)" />
          </div>
          <div class="item-right-mid">{{ data5[0].name }}</div>
          <!-- <div class="item-right-bottom">
            <span
              >XXXXX
              <BigNumber :value="54564" />
            </span>
          </div> -->
        </div>
      </div>

      <div class="top-item">
        <div class="item-left">
          <img class="item-left-img" src="~@/assets/imgs/home2.png" alt="" />
        </div>
        <div class="item-right" v-if="data5.length">
          <div class="item-right-top">
            <BigNumber :value="toFixed(data5[1].value || 0)" />
          </div>
          <div class="item-right-mid">{{ data5[1].name }}</div>
          <!-- <div class="item-right-bottom">
            <span
              >xxxxx
              <BigNumber :value="3435" />
            </span>
          </div> -->
        </div>
      </div>

      <div class="top-item">
        <div class="item-left">
          <img class="item-left-img" src="~@/assets/imgs/home2.png" alt="" />
        </div>
        <div class="item-right" v-if="data5.length">
          <div class="item-right-top">
            <BigNumber :value="toFixed(data5[2].value || 0)" />
          </div>
          <div class="item-right-mid">{{ data5[2].name }}</div>
          <!-- <div class="item-right-bottom">
            <span
              >xxxxx
              <BigNumber :value="3435" />
            </span>
          </div> -->
        </div>
      </div>

      <div class="top-item">
        <div class="item-left">
          <img class="item-left-img" src="~@/assets/imgs/home4.png" alt="" />
        </div>
        <div class="item-right" v-if="data5.length">
          <div class="item-right-top">
            <BigNumber :value="toFixed(data5[3].value || 0)" />
          </div>
          <div class="item-right-mid">{{ data5[3].name }}</div>
          <!-- <div class="item-right-bottom">
            <span
              >xxxxx
              <BigNumber :value="3435" />
            </span>
          </div> -->
        </div>
      </div>

      <div class="top-item">
        <div class="item-left">
          <img class="item-left-img" src="~@/assets/imgs/home4.png" alt="" />
        </div>
        <div class="item-right" v-if="data5.length">
          <div class="item-right-top">
            <BigNumber :value="toFixed(data5[4].value || 0)" />
          </div>
          <div class="item-right-mid">{{ data5[4].name }}</div>
          <!-- <div class="item-right-bottom">
            <span
              >xxxxx
              <BigNumber :value="3435" />
            </span>
          </div> -->
        </div>
      </div>
    </div>
    <!-- 下面 -->
    <div class="home-bottom">
      <dv-border-box-8 class="home-bottom-left boxshadow">
        <div class="dv-border-box-title">项目分布</div>
        <div class="dv-border-box-title-left">
        <el-date-picker :clearable="false" v-model="dateMapType"  type="date" 
            placeholder="请选择" size="small" style="width: 130px" />
          <!--<div class="datetab22 displayflex">
            <div :class="dateMapType === '昨天' ? 'chose' : ''" @click="choseDateType('昨天')">
              昨天
            </div>
            <div :class="dateMapType === '前天' ? 'chose' : ''" @click="choseDateType('前天')">
              前天
            </div>
          </div>-->
        </div>

        <div class="dv-border-box-title-right">
          <el-select collapse-tags multiple @change="onXMFBChange" size="small" style="width: 180px;"
            v-model="dateType1" placeholder="请选择">
            <el-option label="全选" value="全选">
            </el-option>
            <!-- <el-option v-else label="全不选" value="全不选">
            </el-option> -->
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <Map :data="data2" :dateType="dateType1" />
      </dv-border-box-8>

      <div class="home-bottom-right">
        <div class="home-bottom-right-top">
          <dv-border-box-8 class="home-bottom-right-top1 boxshadow">
            <!-- <div class="dv-border-box-title">抄表电量排行</div> -->
            <!-- <div class="home-bottom-right-top1-search">

            </div> -->
            <!-- <dv-scroll-ranking-board class="scroll-ranking-board-content" style="height:280px" :config="{
              data: data3,
              rowNum: 5,
              valueFormatter,
              carousel: 'single'
            }" /> -->
            <div style="height:100%">
              <ChartBar :allProjectArr="allProjectArr" />
            </div>

          </dv-border-box-8>

          <dv-border-box-8 class="home-bottom-right-top2 boxshadow">
            <ChartLine :allProjectArr="allProjectArr" />
            <!-- <div class="dv-border-box-title">电量总量统计</div>
            <div class="home-bottom-right-top2-content">
              <div class="">
                <div class="box11 box11bg">出清总电量</div>
                <div class="box11">
                  <div class="box11-value1">
                    <BigNumber :value="toFixed(data4.realTimeClearedPower, 0)" />
                  </div>
                </div>
              </div>

              <div>
                <div class="box11 box11bg">中长期总电量</div>
                <div class="box11">
                  <div class="box11-value1">
                    <BigNumber :value="toFixed(data4.midLongTermPower, 0)" />
                  </div>
                </div>
              </div>
            </div> -->
          </dv-border-box-8>
        </div>

        <dv-border-box-8 class="home-bottom-right-bottom boxshadow">
          <div class="dv-border-box-title">月度交易价格累计汇总</div>
          <div class="dv-border-box-title-left3">
            <el-radio-group v-model="radioBottom" size="small">
              <el-radio-button label="风电场"></el-radio-button>
              <el-radio-button label="光伏"></el-radio-button>
            </el-radio-group>
          </div>
          <div class="dv-border-box-title-right">
            <!-- <el-select style="width: 100px;margin-right: 8px;" v-model="dateType" size="small" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select> -->
            <el-date-picker style="width: 150px;" size="small" v-model="dateValueBottom"
              type="month" range-separator="-" :clearable="false" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
            <!-- <el-date-picker style="width: 220px;" size="small" v-model="dateValueBottom"
              type="monthrange" range-separator="-" :clearable="false" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker> -->
          </div>
          <div class="center-bottom">
            <!-- <CenterBottom :data="data5" /> -->
            <CenterBottom1 :data="data6" :type="radioBottom" />
          </div>

        </dv-border-box-8>
      </div>
    </div>
  </div>
</template>

<script>
import BigNumber from "@/components/BigNumber/index.vue";
import { getTotalApi, mapApi, getRankApi, getTotalPowerApi, getTotalByDateApi, getDateApi } from "@/api/home";
import CenterBottom from "./CenterBottom.vue";
import CenterBottom1 from "./CenterBottom1.vue";
import ChartLine from "./ChartLine.vue";
import ChartBar from "./ChartBar.vue";
import Map from "./Map.vue";
import moment from "moment";
import { projects } from "@/api/table";
export default {
  components: {
    BigNumber,
    CenterBottom,
    Map,
    CenterBottom1,
    ChartBar,
    ChartLine,
  },
  data() {
    return {
      dateValue: [moment().subtract(7, 'days'), moment()],
      dateType: 'daterange',
      dateValueBottom: moment(),
      // dateValueBottom: [moment(), moment()],
      options: [
        {
          value: 'daterange',
          label: '日'
        },
        {
          value: 'monthrange',
          label: '月'
        },
        {
          value: 'year',
          label: '年'
        },
      ],
      dateType1: [],
      options1: [
        // {
        //   value: '全选',
        //   label: '全选'
        // },
        {
          value: '中长期电价',
          label: '中长期电价'
        },
        {
          value: '日前电价',
          label: '日前电价'
        },
        {
          value: '实时电价',
          label: '实时电价'
        },
        {
          value: '抄表卡电价',
          label: '抄表卡电价'
        },
        {
          value: '结算单电价',
          label: '结算单电价'
        },
      ],
      data1: {},
      data2: [],
      data3: [],
      data4: {},
      data5: [],
      data6: [],
      config: {

      },
      dateMapType: '',
      radioBottom: '风电场',
      chartBarData: [
        {
          annualTarget: 12,
          cumulativeCompletion: 12,
          exceededValue: 12,
          annualTargetRate: 12,
          lineName: '1月',
        }
      ],
      chartLineData: [],
      allProjectArr: [],
    };
  },
  created() {
    this.init()
    this.getCheckList()
  },
  watch: {
    radioBottom: {
      handler(val) {
        this.getBottomTable();
      },
      deep: true,
    },
    dateValueBottom: {
      handler(val) {
        this.getBottomTable();
      },
      deep: true,
    },
    dateValue: {
      handler(val) {
        this.getTop();
      },
      deep: true,
    },
    dateType: {
      handler(val) {
        this.getTop();
      },
      deep: true,
    },
    // dateType1: {
    //   handler() {
    //     this.getMapData()
    //   },
    //   deep: true,
    // },
    dateMapType: {
      handler() {
        this.getMapData()
      },
      deep: true,
    },
  },
  mounted() { 
    
  },
  methods: {
    async getCheckList() {
      const data = await projects()
      // const data = [
      //   {
      //     projectId: "1", // 项目id
      //     companyId: "1", // 所属公司
      //     projectName: "周覃", //项目名称
      //   },
      // ];
      const ll = data.map((item) => {
        return {
          label: item.projectName,
          value: item.projectId,
        };
      });
      ll.unshift({
          label: '合计',
          value: '0',
        })
      this.allProjectArr = ll
      // this.checked = [this.checkList[0].label];
    },
    // choseDateType(val) {
    //   this.dateMapType = val
    // },
    onXMFBChange(val) {
      console.log(val, 'val----------------');
      if (val.includes('全选')) {
        this.dateType1 = this.options1.map(item => item.value)
      } else if (val.includes('全不选')) {
        this.dateType1 = []
      } else {
        this.dateType1 = val
      }
    },
    toFixed(val, fixed = 1) {
      return (val || val == 0) ? Number(Number(val).toFixed(fixed)) : 0
    },
    init() {
      // 1首页上方的汇总数据
      getTotalApi().then(res => {
        this.data1 = res || {}
      })

      // 2地图接口
      this.dateMapType = moment().format('YYYY-MM-DD')

      // 3实时出清总电量接口
      getRankApi().then(res => {
        this.data3 = (res || []).map(item => {
          return {
            name: item.projectName,
            value: Number(item.realTimeClearedPower) || 0,
          }
        })
      })
      // 4首页中部右侧接口
      getTotalPowerApi().then(res => {
        this.data4 = res || {}
      })
      // 5首页下侧柱状图
      this.getTop()
      //6
      this.getBottomTable();
    },
    getMapData() {
      console.log(this.dateType1, 'dateType1---------');
      // const summaryDate = '2025-08-20'
      const summaryDate =  moment(this.dateMapType).format('YYYY-MM-DD')
      // 2地图接口
      mapApi({ summaryDate }).then(res => {
        this.data2 = res || []
      })
    },
    getTop() {
      // 1首页上方內容
      // startDate=2024-01-01&endDate=2025-12-31
      let startDate = null
      let endDate = null
      if (this.dateType === 'daterange') {
        startDate = moment(this.dateValue[0]).format('YYYY-MM-DD')
        endDate = moment(this.dateValue[1]).format('YYYY-MM-DD')
      } else if (this.dateType === 'monthrange') {
        startDate = moment(this.dateValue[0]).startOf('month').format('YYYY-MM-DD')
        endDate = moment(this.dateValue[1]).endOf('month').format('YYYY-MM-DD')
      } else if (this.dateType === 'year') {
        startDate = moment(this.dateValue[0]).startOf('year').format('YYYY-MM-DD')
        endDate = moment(this.dateValue[1]).endOf('year').format('YYYY-MM-DD')
      }
      getTotalByDateApi({ startDate, endDate }).then(res => {
        this.data5 = res || []
      })
    },
    toFixed1(val, fixed = 2) {
      return ((val || val == 0) && val !== 'NaN') ? Number(val).toFixed(fixed) : '-'
    },
    getBottomTable() {
      // 5首页下侧柱状图
    
      let startDate = null
      let endDate = null
      
        startDate = moment(this.dateValueBottom).startOf('month').format('YYYY-MM-DD')
        endDate = moment(this.dateValueBottom).endOf('month').format('YYYY-MM-DD')
      console.log(startDate,endDate,'startDate');
      
      getDateApi({ type: this.radioBottom, startRecordDate: startDate, endRecordDate: endDate }).then(res => {
        console.log(res,'res---');
        const arr = ['电量', '电价', '营收']
        const ll = []
        res.forEach(item => {
          if (item.projectName !== '合计') {
            // 电量
            ll.push({
              projectName: item.projectName,
              category: '电量(MWh)',
              val1: this.toFixed1(item.transactionPower),
              val2: this.toFixed1(item.settlementPower),
              val3: this.toFixed1(item.partyPower),
              val4: this.toFixed1(item.allPower),
            })
          }
          
          // 电价
          ll.push({
            projectName: item.projectName,
            category: '电价(元/MWh)',
            val1: this.toFixed1(item.transactionPrice),
            val2: this.toFixed1(item.settlementPrice),
            val3: this.toFixed1(item.partyPrice),
            val4: this.toFixed1(item.allPrice),
          })
          // 营收
          ll.push({
            projectName: item.projectName,
            category: '营收(万元)',
            val1: this.toFixed1(item.transactionRevenue),
            val2: this.toFixed1(item.settlementRevenue),
            val3: this.toFixed1(item.partyRevenue),
            val4: this.toFixed1(item.allRevenue),
          })
        });
        this.data6 = ll || []
      })
    },
    valueFormatter({ value }) {
      // console.warn(arguments)
      // const reverseNumber = (value + '').split('').reverse()
      // let valueStr = ''

      // while (reverseNumber.length) {
      //   const seg = reverseNumber.splice(0, 3).join('')
      //   valueStr += seg
      //   if (seg.length === 3) valueStr += ','
      // }

      return Number(value || 0).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
    }
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  padding: 24px;

  .home-top-left {
        // display: flex;
        // align-items: center;
        // // width: 202px;
        // // height: 38px;
        // // font-weight: bold;
        // // font-size: 14px;
        // color: #19ecff;
        // // line-height: 38px;
        // // text-align: right;
        // //   margin-top: 2px;
        // position: absolute;
        // top: -18px;
        // left: 24px;
        height: 24px;
        margin-left: 12px;
        :deep() {
          .el-select .el-select__tags>span {
            display: flex;
          }
        }
      }

  .home-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 68px;
    margin-top: 24px;
    position: relative;

    

    .top-item {
      display: flex;
      align-items: center;

      .item-left {
        width: 117px;
        height: 114px;
        min-width: 117px;
        min-height: 114px;
        background-image: url("~@/assets/imgs/circlebg.png");
        background-size: 100% 100%;
        position: relative;
        margin-right: 19px;
        animation: rotate 10s linear infinite;

        @keyframes rotate {
          from {
            transform: rotate(0deg);
          }

          to {
            transform: rotate(360deg);
          }
        }

        .item-left-img {
          width: 60px;
          height: 60px;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          animation: rotate2 10s linear infinite;

          @keyframes rotate2 {
            from {
              transform: rotate(360deg);
            }

            to {
              transform: rotate(0deg);
            }
          }
        }
      }

      .item-right {
        .item-right-top {
          font-weight: 600;
          font-size: 32px;
          color: #00e4ff;
          // line-height: 40px;
        }

        .item-right-mid {
          white-space: nowrap;
          font-weight: 600;
          // font-size: 20px;
          font-size: 16px;
          color: #ffffff;
          line-height: 48px;
        }

        .item-right-bottom {
          font-size: 14px;
          color: #00e4ff;
          line-height: 20px;
        }
      }
    }
  }

  .home-bottom {
    display: flex;
    // justify-content: space-between;
    align-items: center;

    .boxshadow {
      box-shadow: inset 0px 0px 34px 0px rgba(17, 40, 255, 0.66);
    }

    .dv-border-box-title {
      width: 202px;
      height: 38px;
      background-image: url("~@/assets/imgs/circletop.png");
      background-size: 100%;
      margin: 0 auto;
      font-weight: bold;
      font-size: 14px;
      color: #19ecff;
      line-height: 38px;
      text-align: center;
      //   margin-top: 2px;
      position: relative;
      top: 2px;
    }

    .home-bottom-left {
      width: 700px;
      height: 722px;
      margin-right: 32px;
      position: relative;

      .displayflex {
        display: flex;
        align-items: center;
      }

      .dv-border-box-title-left {
        display: flex;
        align-items: center;
        // width: 202px;
        // height: 38px;
        // font-weight: bold;
        // font-size: 14px;
        color: #19ecff;
        // line-height: 38px;
        // text-align: right;
        //   margin-top: 2px;
        position: absolute;
        top: 8px;
        left: 24px;

        .datetab22 {
          margin-right: 8px;
          background: #04065f;
          width: 150px;
          height: 32px;
          border-radius: 4px;
          padding: 4px;
          font-size: 16px;
          color: #a8acb2;
          border: 1px solid #66FFFF;

          >div {
            width: 70px;
            text-align: center;
            cursor: pointer;
          }

          .chose {
            background: #017efa;
            height: 28px;
            line-height: 28px;
            border-radius: 4px;
            color: #FFFFFF;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
          }
        }

        .chose {
          background: #017efa;
          height: 28px;
          line-height: 28px;
          border-radius: 4px;
          color: #FFFFFF;
          box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
        }
      }
      .dv-border-box-title-right {
        display: flex;
        align-items: center;
        // width: 202px;
        // height: 38px;
        // font-weight: bold;
        // font-size: 14px;
        color: #19ecff;
        // line-height: 38px;
        // text-align: right;
        //   margin-top: 2px;
        position: absolute;
        top: 8px;
        right: 24px;

        :deep() {
          .el-select .el-select__tags>span {
            display: flex;
          }
        }
      }
    }

    .home-bottom-right {
      .home-bottom-right-top {
        display: flex;
        margin-bottom: 32px;

        // justify-content: space-between;
        .home-bottom-right-top1 {
          width: 506px;
          height: 322px;
          margin-right: 32px;

          .scroll-ranking-board-content {
            padding: 0px 43px;
          }

          .home-bottom-right-top1-search{
            height: 38px;
            width: 100%;
          }

          // border: 2px solid #0D53B7;
        }

        .home-bottom-right-top2 {
          width: 506px;
          height: 322px;

          .dv-border-box-date {
            width: 100%;
            margin-top: 30px;
            margin-bottom: 30px;
            padding-right: 43px;
            text-align: right;
            font-weight: 600;
            font-size: 14px;
            color: #32C5FF;
          }

          .home-bottom-right-top2-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 43px;
            margin-top: 60px;

            .box11bg {
              background: #094B7C;
            }

            .box11 {
              border: 1px solid #67D0F2;
              height: fit-content;
              padding: 16px 0;
              margin-bottom: 9px;
              width: 200px;
              text-align: center;

              .box11-value1 {
                font-weight: 500;
                font-size: 34px;
                color: #66FFFF;
                line-height: 48px;
                margin-bottom: 8px;
              }

              .box11-value2 {
                font-weight: 400;
                font-size: 14px;
                color: #FF2D00;
              }
            }
          }

          // border: 2px solid #0D53B7;
        }
      }

      .home-bottom-right-bottom {
        width: 1044px;
        height: 368px;
        position: relative;

        .center-bottom {
          height: calc(100% - 38px);
          width: 100%;
        }

        .dv-border-box-title-left3 {
          // width: 202px;
          height: 38px;
          font-weight: bold;
          font-size: 14px;
          color: #19ecff;
          line-height: 38px;
          text-align: right;
          //   margin-top: 2px;
          position: absolute;
          top: 8px;
          left: 24px;
        }
        .dv-border-box-title-right {
          // width: 202px;
          height: 38px;
          font-weight: bold;
          font-size: 14px;
          color: #19ecff;
          line-height: 38px;
          text-align: right;
          //   margin-top: 2px;
          position: absolute;
          top: 8px;
          right: 24px;
        }
      }
    }
  }
}
</style>
